<script lang="ts">
import { defineComponent } from 'vue'
import * as paragraph from '../assets/text/lifecycle.js'
import { ref } from 'vue'
export default defineComponent({
    setup() {
        console.log('Lifecycle setup...',new Date().getTime())
        const img1 = new URL("../assets/img/lifecycle1.jpg", import.meta.url).href;
        const img2 = new URL("../assets/img/lifecycle2.jpg", import.meta.url).href;
        let cart = ref(1)
        return {
            paragraph,
            img1,
            img2,
            cart,
        }
    },
    data(){
        return {
            count:0,
        }
    },
    methods:{
        addCount(){
            this.count ++;
            
        }
    },
    beforeCreate(){
        console.log('beforeCreate...',new Date().getTime())
        console.time('beforeCreate - created')
        
    },
    created(){
        console.timeEnd('beforeCreate - created')
        console.log('created...',new Date().getTime())
        console.time('created - beforeMount')
    },
    beforeMount(){
        console.timeEnd('created - beforeMount')
        console.log('beforeMount...',new Date().getTime())
        console.time('beforeMount - mounted')
    },
    mounted(){
        console.timeEnd('beforeMount - mounted')
        console.log('mounted...',new Date().getTime())
        
    },
    beforeUnmount(){
        console.log('beforeUnmount...',new Date().getTime())
        console.time('beforeUnmount - unmounted')
    },
    unmounted(){
        console.timeEnd('beforeUnmount - unmounted')
        console.log('unmounted...',new Date().getTime())
        //debugger
    },
    updated(){
        console.log('updated...',new Date().getTime())
    },
    renderTracked({ key, target, type }) {
        console.log('renderTracked',{ key, target, type })
        /* 当组件第一次渲染时，这将被记录下来:
        {
        key: "cart",
        target: {
            cart: 0
        },
        type: "get"
        }
        */
    },
    renderTriggered({ key, target, type }) {
        console.log('renderTriggered',{ key, target, type })
    },

})
</script>

<template>
    <div class="home-box">
        <my-title :pageTitle="true">lifecycle</my-title>
        <my-title >生命周期图示</my-title>
        <my-img :url="img1" w="600px"/>
        
        <my-code-viewer :code="paragraph.code1"></my-code-viewer>
        <my-block>
            {{paragraph.text1}}
        </my-block>
        <my-img :url="img2" />
        <my-block>
            {{paragraph.text2}}
        </my-block>
        <p>cart:{{cart}}</p>
        <my-block>
            <div>
                插槽中的count:{{count}} （不会触发updated,renderTracked和renderTriggered钩子函数）
            </div>
            <button @click="addCount()">count++</button>
            &nbsp;&nbsp;
            <button @click="cart++">cart++</button>
        </my-block>
        <my-code-viewer :code="paragraph.code2"></my-code-viewer>
    </div>
</template>